<template>
    <!-- 用餐台账 -->
    <base-breadcrumb :title="$route.meta.title">
        <a-spin :spinning="loading">
            <a-card :bordered="false">
                <title-name title="基本信息"></title-name>
                <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                    <a-row :gutter="24">
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="单位">
                                <BaseInput disabled v-model="unitName"></BaseInput>
                            </a-form-model-item>
                        </a-col>
                        <a-col :md="8" :sm="8">
                            <a-form-model-item label="月份">
                                <BaseInput disabled v-model="meetTimeMonth"></BaseInput>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </a-card>
            <!-- 表格 -->
            <a-card :bordered="false">
                <a-tabs default-active-key="1">
                    <a-tab-pane key="1" tab="按采购种类">
                        <!-- 表格 -->
                        <s-table
                            ref="categories"
                            tableLayout="fixed"
                            size="default"
                            rowKey="key"
                            :columns="categories"
                            :data="categoriesData"
                            :alert="true"
                            show-size-changer
                            show-quick-jumper
                            :showPagination="false"
                        >
                            <template slot="action" slot-scope="text, record">
                                <a @click="handleManage(record)">查看</a>
                            </template>
                        </s-table>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="按食材供应商" force-render>
                        <!-- 表格 -->
                        <s-table
                            ref="supplier"
                            tableLayout="fixed"
                            size="default"
                            rowKey="key"
                            :columns="form.supplierTitle"
                            :data="supplierData"
                            :alert="true"
                            show-size-changer
                            show-quick-jumper
                            :showPagination="false"
                        >
                            <span slot="num" slot-scope="text, record, index">{{ index + 1 }}</span>
                        </s-table>
                    </a-tab-pane>
                </a-tabs>
            </a-card>
            <procurement-modal
                v-if="visible.update"
                :init-data="childInitData"
                @cancel="visible.update = false"
                @confirm="visible.update = false"
            />
                </a-spin
        >
        <div class="tool-btns mb20 page-btn-right-top">
            <a-button class="ml20" type="primary" @click="handleClose">关闭</a-button>
        </div>
    </base-breadcrumb>
</template>

<script>
import { STable } from '@/components' // 表格
import { getSelectReportByProcurement, getSelectReportByDay } from '@/api/office/canteen' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import procurementModal from './procurementModal.vue'
const categories = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        },
    },
    {
        title: '采购日期',
        dataIndex: 'meetTime',
    },
    {
        title: '菜类(荤素)(元)',
        ellipsis: true,
        dataIndex: 'vegetables',
    },
    {
        title: '蛋类(元)',
        ellipsis: true,
        dataIndex: 'egg',
    },
    {
        title: '食用油(元)',
        ellipsis: true,
        dataIndex: 'oil',
    },
    {
        title: '大米(元)',
        ellipsis: true,
        dataIndex: 'rice',
    },
    {
        title: '面粉(元)',
        ellipsis: true,
        dataIndex: 'flour',
    },
    {
        title: '佐料',
        ellipsis: true,
        dataIndex: 'seasoning',
    },
    {
        title: '水果牛奶(元)',
        ellipsis: true,
        dataIndex: 'milk',
    },
    {
        title: '其他(元)',
        ellipsis: true,
        dataIndex: 'other',
    },

    {
        title: '合计金额(元)',
        ellipsis: true,
        dataIndex: 'totalMoney',
    },

    {
        title: '附件',
        dataIndex: 'action',
        width: '180px',
        align: 'center',
        scopedSlots: { customRender: 'action' },
    },
]

export default {
    extends: new BaseEditPage(),
    components: {
        STable,
        procurementModal,
    },
    data() {
        this.categories = categories

        return {
            visible: {
                update: false,
            },

            loading: false,
            categoriesData: () => {
                return new Promise((resolve, reject) => {
                    resolve({
                        data: this.form.procurementData,
                    })
                })
            },
            supplierData: () => {
                return new Promise((resolve, reject) => {
                    resolve({
                        data: this.form.supplierData,
                    })
                })
            },
            editModel: 0,
            form: {},
        }
    },
    mounted() {
        this.loading = true
        const requestParameters = {
            unitId: this.unitId,
            meetTimeMonth: this.meetTimeMonth,
        }
        getSelectReportByProcurement(requestParameters).then((res) => {
            this.loading = false
            this.form = res.data

            this.$refs.categories.refresh(true)
            this.$refs.supplier.refresh(true)
        })
    },

    methods: {
        handleClose() {
            this.$multiTab.close(this.$route.fullpath)
        },
        handleManage(record) {
            this.childInitData = {
                ...record,
            }
            this.visible.update = true
            return
        },
    },
}
</script>
